<template>
    <el-dialog :title="title" v-model="dialogVisible" @open="dialogOpen" width="800px">
        <el-radio-group v-model="exportType" @change="changeExportType">
            <el-radio :disabled="!isExport" label="markdown"/>
            <el-radio :disabled="!isExport" label="json"/>
        </el-radio-group>

        <el-input class="content" type="textarea" :rows="6" v-model="content"> </el-input>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="cancelClick">{{closeButtonText}}</el-button>
                <template v-if="!isExport">
                    <el-button type="primary" @click="okClick">导入</el-button>
                </template>
            </span>
        </template>
    </el-dialog>
</template>

<script lang="ts">
import { computed, defineComponent, ref } from 'vue';
import { ExportType } from '@/types/export';

export default defineComponent({
    props: {
        isExport: {
            type: Boolean,
            required: true,
        },
        visible: {
            type: Boolean,
            required: true,
        },
        exportTracker: {
            type: Function,
            required: true,
        },
        importTracker: {
            type: Function,
            required: true,
        },
    },
    emits: ['update:visible'],
    setup(props, { emit }) {
        const exportType = ref(ExportType.MARKDOWN);
        const closeButtonText = computed(() => (props.isExport ? '关闭' : '取消'));
        const title = computed(() => (props.isExport ? '导出' : '导入'));
        const content = ref('');
        // eslint-disable-next-line vue/no-setup-props-destructure
        const { exportTracker, importTracker } = props;
        const dialogVisible = computed({
            get() {
                return props.visible;
            },
            set(value: boolean) {
                emit('update:visible', value);
            },
        });
        const dialogOpen = () => {
            if (props.isExport) {
                exportType.value = ExportType.MARKDOWN;
                content.value = exportTracker(exportType.value);
            } else {
                content.value = '';
                exportType.value = ExportType.JSON;
            }
        };
        const cancelClick = () => {
            dialogVisible.value = false;
        };

        const okClick = async () => {
            importTracker(content.value);
            dialogVisible.value = false;
        };

        const changeExportType = (value: ExportType) => {
            if (props.isExport) {
                content.value = exportTracker(value);
            }
        };

        return {
            exportType,
            title,
            closeButtonText,
            content,
            dialogVisible,
            dialogOpen,
            cancelClick,
            okClick,
            changeExportType,
        };
    },
});
</script>

<style scoped lang="scss">
</style>
